<template>
    <div class="page-header">
        <h1>Vue3 <small>新一代JavaScript框架</small></h1>
    </div>
    <div class="page-content">
        <Chapter1 title="Vue简介" />
        <Chapter2 title="全局组件" />
        <Chapter3 title="模版语法" />
        <Chapter4 title="响应式基础" />
        <Chapter5 title="计算属性" />
        <Chapter6 title="样式绑定" />
        <Chapter7 title="事件处理" />
        <Chapter8 title="生命周期" />
        <Chapter9 title="监视器" />
        <Chapter10 title="组件props" />
        <Chapter11
            title="组件自定义事件"
            @myevent="() => console.log(`组件自定义事件`)"
        />
        <Chapter12 title="组件插槽" />
    </div>
</template>

<script setup>
import Chapter1 from "./components/chapter1";
import Chapter2 from "./components/chapter2";
import Chapter3 from "./components/chapter3";
import Chapter4 from "./components/chapter4";
import Chapter5 from "./components/chapter5";
import Chapter6 from "./components/chapter6";
import Chapter7 from "./components/chapter7";
import Chapter8 from "./components/chapter8";
import Chapter9 from "./components/chapter9";
import Chapter10 from "./components/chapter10";
import Chapter11 from "./components/chapter11";
import Chapter12 from "./components/chapter12";
</script>

<style lang="scss" scoped></style>
